<template>
  <el-table
    header-row-class-name="base-table-header-v3"
    row-class-name="base-table-row-v3"
    class="sparepart-apply-table"
    border
    :data="disposeFormListViewTime(data, columns)">
    <el-table-column
      v-for="column in columns"
      :key="column.fieldId"
      :label="column.displayName"
      :prop="column.fieldName"
      :show-overflow-tooltip="isOpenData ? column.fieldName != 'propserName' : true"
      :min-width="column.minWidth || '100px'">
      <template slot-scope="scope">
        <!-- start 申请编号 -->
        <template v-if="column.fieldName === 'approveNo' && scope.row.view">
          <a class="view-detail-btn" @click.stop.prevent="createPartApplyViewTab(scope.row.approveNo)">{{ scope.row[column.fieldName] }}</a>
        </template>
        <!-- end 申请编号 -->

        <!-- start 备件去向 -->
        <template v-else-if="column.fieldName === 'targetName'">
          <template v-if="scope.row.targetId">
            <template v-if="isOpenData && scope.row.targetStaffId">
              <open-data type="userName" :openid="scope.row.targetStaffId"></open-data>
            </template>
            <template v-else>
              {{scope.row.targetName}}
            </template>
          </template>
          <template v-else>
            {{$t('common.form.preview.sparepart.des7')}}
          </template>
        </template>
        <!-- end 备件去向 -->
        
        <!-- start 申请人 -->
        <template v-else-if="column.fieldName === 'propserName'">
          <template v-if="isOpenData">
            <open-data ref="openDataRef" type="userName" :openid="scope.row.propserStaffId"></open-data>
          </template>
          <template v-else>{{ scope.row[column.fieldName] }}</template>
        </template>
        <!-- end 申请人 -->

        <!-- start 申请时间 -->
        <template v-else-if="column.fieldName === 'propserTimeLong'">
          {{ scope.row[column.fieldName] | fmt_date }}
        </template>
        <!-- end 申请时间 -->

        <template v-else>
          {{ scope.row[column.fieldName] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()

export default {
  name: 'sparepart-apply-records',
  props: {
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      isOpenData,
      columns: [{
        displayName: this.$t('task.detail.components.applyNo'),
        fieldName: 'approveNo',
        minWidth: '140px'
      }, {
        displayName: this.$t('common.form.preview.sparepart.colum10'),
        fieldName: 'targetName'
      }, {
        displayName: this.$t('common.form.preview.sparepart.colum9'),
        fieldName: 'sourceName'
      }, {
        displayName: this.$t('part.text76'),
        fieldName: 'type'
      }, {
        displayName: this.$t('common.base.quantity'),
        fieldName: 'variation'
      }, {
        displayName: this.$t('task.detail.components.handledNumber'),
        fieldName: 'solvedVariation'
      }, {
        displayName: this.$t('common.base.remark'),
        fieldName: 'remark',
        minWidth: '160px'
      }, {
        displayName: this.$t('task.detail.components.applyTime'),
        fieldName: 'propserTimeLong'
      }, {
        displayName: this.$t('task.detail.components.applyPerson'),
        fieldName: 'propserName'
      }, {
        displayName: this.$t('common.form.preview.stock.sparepartStockDisplayName.approveName'),
        fieldName: 'executorName'
      }]
    }
  },
  methods: {
    disposeFormListViewTime,
    createPartApplyViewTab(approveNo) {
      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageSparepartApply,
        params: `noHistory=1&approveNo=${approveNo}&action=applyDetail`,
        fromId
      })
    }
  }
}
</script>

<style lang="scss">
.sparepart-apply-table {
  background: $bg-color-l1;

  &::before {
    height: 0;
  }

  .base-table-header-v3 th {
    background: none;
    color: #8593A6;
    border-bottom: none;
    font-size: $font-size-small;
  }

  tr {
    background: none !important;

    &:hover td {
      background: none !important;
    }
  }

  td {
    border-bottom: none !important;
  }

  .view-detail-btn {
    cursor: pointer;
  }
}
</style>
